<template>
	<view>
		<view class="" style="border-bottom: 1rpx solid #f5f5f5;">
			<view class="name">
				练习编号
				<text>{{ info.testNo }}</text>
			</view>
			<view class="name">
				题库名称
				<text>{{ info.plugsPracticeQuestionBank.questionBankName }}</text>
			</view>
		</view>
		<view class="" style="height: 350rpx;"><progressBar :progress_txt="progress_txt"></progressBar></view>

		<view class="">
			<view class="" style="padding:0 20rpx 20rpx;border-bottom: 1rpx solid #f5f5f5;">
				<view class="" style="display: flex;align-items: center;justify-content: space-around;font-size: 26rpx;">
					<view class="" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
						<view class="" style="font-weight: 700;font-size: 30rpx;margin-bottom: 10rpx;">{{ constNum }}</view>
						<view class="" style="">试题数量</view>
					</view>
					<view class="" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
						<view class="" style="color: #0089ff;font-weight: 700;font-size: 30rpx;margin-bottom: 10rpx;">{{ success }}</view>
						<view class="">答对试题</view>
					</view>
					<view class="" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
						<view class="" style="color: #f84d27;font-weight: 700;font-size: 30rpx;margin-bottom: 10rpx;">{{ error }}</view>
						<view class="">答错试题</view>
					</view>
					<view class="" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
						<view class="" style="color: #f84d27;font-weight: 700;font-size: 30rpx;margin-bottom: 10rpx;">{{ weinum }}</view>
						<view class="">未答试题</view>
					</view>
				</view>
			</view>
			<view class="btn">
				<view class="btn-left" @tap="pickerTopic1(0, 0)">答案解析</view>
				<view class="btn-left1" v-if="info.testStatus == 0" @tap="pickerTopic(0, 0)">继续练习</view>
				<view class="btn-left1" v-if="info.testStatus == 1">练习结束</view>
			</view>
			<view class="" style="text-align: center;padding: 30rpx;font-weight: 700;border-bottom: 1rpx solid #f5f5f5;font-size: 32rpx;">答题卡</view>
			<scroll-view class="topic-list" style="height: 700rpx;" scroll-y="">
				<view class="list-box h-flex-x h-flex-wrap h-flex-6">
					<view class="list-item" v-for="(item, index) in dataList" :key="index" @tap="pickerTopic(index, 0)" :style="[item.questionType == 3 ? styleObj : '']">
						<view
							v-if="item.questionType != 3"
							class="h-flex-x h-flex-center "
							:class="{
								success1: item.answerResult && item.answer == item.answerResult,
								error1: item.answerResult && item.answer != item.answerResult
							}"
						>
							{{ index + 1 }}
						</view>
						<view
							class="h-flex-x h-flex-center"
							style=""
							v-if="item.questionType == 3"
							v-for="(itemmmm, indexxxx) in item.questionStemExtJson.testQuestionList"
							:class="{
								success1: itemmmm.answerResult && itemmmm.answer == itemmmm.answerResult,
								error1: itemmmm.answerResult && itemmmm.answer != itemmmm.answerResult
							}"
							@tap="pickerTopic(index, indexxxx)"
						>
							<view class="">{{ index + 1 }}.{{ indexxxx + 1 }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import progressBar from '../../../components/chocolate-progress-bar/chocolate-progress-bar.vue';
import {
	getPracticeStudentTestRecordList,
	searchPlugsPracticeTestRecordById,
	getPracticeTestQuestionsByquestionBankList,
	searchPlugsPracticeStudentTestRecordById
} from '../../../utils/api.js';
export default {
	data() {
		return {
			dataList: [],
			info: {},
			recordList: [],
			progress_txt: 0,
			success: 0,
			error: 0,
			weinum: 0,
			dataId: 0,
			constNum: 0,
			styleObj: {
				display: 'flex',
				width: 'auto',
				flexWrap: 'wrap'
			},
			accuracy:0
		};
	},
	components: {
		progressBar
	},
	onLoad(option) {
		// this.dataList = JSON.parse(decodeURIComponent(option.dataList));
		this.dataId = option.dataId;
		// this.accuracy=option.accuracy;
		// uni.setNavigationBarTitle({
		// 	title: this.info.plugsPracticeQuestionBank.questionBankName
		// });
		// this.dataList=uni.getStorageSync('dataList')
	},
	onShow() {
		this.getinfo();
	},
	computed: {
		// 结果统计
	},
	methods: {
		getinfo() {
			let data = {
				id: this.dataId
			};
			searchPlugsPracticeStudentTestRecordById(data).then(res => {
				if (res.code == 200) {
					this.info = res.body;
					this.recordList = res.body.plugsPracticeStudentTestRecordDetailsList;
					this.getBankList(this.info.questionBankId);
				}
			});
		},
		getBankList(id) {
			let data = {
				questionBankId: id
			};
			getPracticeTestQuestionsByquestionBankList(data)
				.then(res => {
					if (res.code == 200) {
						this.dataList = res.body;
						this.dataList.forEach(item => {
							item.questionStemExtJson = JSON.parse(item.questionStemExtJson);
							item.answer = [];
							item.list = [];

							if (item.questionType != 3) {
								item.questionStemExtJson.testQuestionOptions.forEach(result => {
									if (result.answerStatus == 1) {
										item.answer.push(result.optionsName);
									}
								});
							} else {
								item.questionStemExtJson.testQuestionList.forEach(result => {
									result.answer = [];
									result.list = [];
									result.testQuestionOptions.forEach(result1 => {
										if (result1.answerStatus == 1) {
											result.answer.push(result1.optionsName);
										}
									});
								});
							}
						});
						this.dataList.forEach(item => {
							this.recordList.forEach(itemm => {
								if (item.id == itemm.testQuestionsId) {
									if (item.questionType != 3) {
										item.answerStatus = itemm.answerStatus;
										item.answerResult = itemm.userAnswer;
									} else {
										itemm.result11 = itemm.userAnswer.split('_');
										itemm.index = itemm.userAnswer.split('_')[1];
										itemm.content = itemm.userAnswer.split('_')[2];
										item.questionStemExtJson.testQuestionList.forEach((result, index) => {
											if (itemm.index == index) {
												result.answerStatus = itemm.answerStatus;
												result.answerResult = itemm.content;
											}
										});
									}
								}
							});
						});
						console.log(this.dataList, 77777777777);
					}
				})
				.then(() => {
					this.countResult();
				});
		},

		countResult() {
			this.success = 0;
			this.error = 0;
			this.constNum = 0;
			this.dataList.forEach(item => {
				if (item.questionType != 3) {
					this.constNum++;
					if (item.answerResult) {
						if (item.answerResult == item.answer) {
							this.success++;
						} else {
							this.error++;
						}
					}
				} else {
					item.questionStemExtJson.testQuestionList.forEach(itemm => {
						this.constNum++;
						if (itemm.answerResult) {
							console.log(itemm.answerResult, itemm.answer, 666);
							if (itemm.answerResult == itemm.answer) {
								this.success++;
							} else {
								this.error++;
							}
						}
					});
				}
			});
			this.progress_txt = ((this.success / this.constNum) * 100).toFixed(2);
			this.weinum = this.constNum - this.success - this.error;
			
			console.log(this.progress_txt,'fens');
		},
		pickerTopic(index, indexxx) {
			console.log(index, indexxx);
			// uni.navigateTo({
			// 	url:`/pages/user/lianxiList/jixulianxi?dataList=${encodeURIComponent(JSON.stringify(this.dataList))}&indexId=${index}`
			// })
			if (this.info.testStatus == 0) {
				uni.navigateTo({
					url: `/pages/user/lianxiList/jixulianxi?info=${encodeURIComponent(JSON.stringify(this.info.plugsPracticeQuestionBank))}&typeId=0&practiceId=${
						this.info.id
					}&indexId=${index}&indexId1=${indexxx}`
				});
			} else {
				uni.navigateTo({
					url: `/pages/user/lianxiList/lianxijiexi?info=${encodeURIComponent(JSON.stringify(this.info.plugsPracticeQuestionBank))}&typeId=0&practiceId=${
						this.info.id
					}&indexId=${index}&indexId1=${indexxx}`
				});
			}
		},
		pickerTopic1(index, indexxx) {
			console.log(index, indexxx);
			uni.navigateTo({
				url: `/pages/user/lianxiList/lianxijiexi?info=${encodeURIComponent(JSON.stringify(this.info.plugsPracticeQuestionBank))}&typeId=0&practiceId=${
					this.info.id
				}&indexId=${index}&indexId1=${indexxx}`
			});
		}
	}
};
</script>

<style lang="scss">
@import 'lib/helang-flex.scss';
.name {
	display: flex;
	align-items: center;
	padding: 10rpx 0;
	font-size: 24rpx;
	color: #666;
	padding: 10rpx 20rpx;

	text {
		margin-left: 10rpx;
	}
}
.btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 100rpx 0;
	.btn-left {
		height: 60rpx;
		width: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #999;
		border-radius: 60rpx;
		color: #fff;
		font-size: 26rpx;
	}
	.btn-left1 {
		height: 60rpx;
		width: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f84d27;
		border-radius: 60rpx;
		color: #fff;
		font-size: 26rpx;
	}
}

.topic-list {
	height: 600rpx;

	.list-box {
		padding: 20rpx 20rpx 0 20rpx;
		font-size: 28rpx;
		color: #666;

		.list-item {
			padding-bottom: 20rpx;

			> view {
				width: 80rpx;
				height: 80rpx;
				background-color: #fff;
				border: #ddd solid 1px;
				border-radius: 50%;
				// margin: 0 auto;

				&.active {
					border: #0089ff solid 1px;
				}

				&.success {
					background-color: #dbf2ff;
					color: #0089ff;
					border: none;

					&.active {
						border: #0089ff solid 1px;
					}
				}
				&.success1 {
					background-color: #0089ff;
					color: #fff;
					border: none;
				}

				&.error {
					background-color: #ffeceb;
					color: #f84d27;
					border: none;

					&.active {
						border: #f84d27 solid 1px;
					}
				}
				&.error1 {
					background-color: red;
					color: #fff;
					border: none;
				}
			}
		}
	}
}
</style>
